<template>
  <div class="hello">
    <button @click="start">播放</button>
    <button @click="stop">停止</button>
    <canvas id="video-canvas"></canvas>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data(){
    return{
      player:null
    }
  },
  methods:{
    start(){
      let url ="rtsp://admin:12345@192.168.1.64:554/ch1/sub/av_stream"
      let dirUrl ='ch1'
      this.$axios
      .get("/nodeApi/rtspTransport", {
        params: {
          url: url,
          dirUrl: dirUrl,
        },
      })
      .then((res) => {
        //请求的数据存储在res.data 中
        console.log(res);
        this.pId = res.data.pId;
        this.$nextTick(() => {
          let canvas = document.getElementById("video-canvas");
          // 服务器部署后地址换成服务器地址
          let videoUrl = `ws://localhost:8085/${dirUrl}`;
          // eslint-disable-next-line no-undef
          this.player = new JSMpeg.Player(videoUrl, { canvas: canvas });
        });
      });
    },
    stop() {
      this.$axios
        .get("/nodeApi/stopTransport", {params:{
          pId: this.pId,
        }})
        .then((res) => {
          this.player.pause()
          this.player.destroy()
          this.player = null
          console.log(res);
        });
    },
  }
}
</script>

<style scoped>
</style>
